﻿@page "/radar"

@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Series
@using R = Blazor.ECharts.Options.Series.Radar
@using G = Blazor.ECharts.Options.Series.Gauge
@using L = Blazor.ECharts.Options.Series.Line


<div class="chart-container" >
    <ERadar Option="@OptionRader" Class="chart-fill" style="height:720px"></ERadar>
</div>

<div class="chart-container">
    <Gauge Option="@OptionGuage" Class="chart-fill" Style="height: 720px"></Gauge>
</div>

@code {
    private EChartsOption<R.Radar> OptionRader;
    private EChartsOption<G.Gauge> OptionGuage;
    private EChartsOption<L.Line> OptionLine;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        OptionRader = new()
        {
            Title = new() { Text = "基础雷达图" },
            Tooltip = new(),
            Legend = new() { Data = new[] { "预算分配（Allocated Budget）", "实际开销（Actual Spending）" } },
            Radar = [
                new()
                {
                    Name = new()
                    {
                        TextStyle = new()
                        {
                            Color = "#fff",
                            BackgroundColor = "#999",
                            BorderRadius = 3,
                            Padding = new[] { 3, 5 }
                        }
                    },
                    Indicator = new()
                    {
                        new() { Name = "销售（sales）", Max = 6500 },
                        new() { Name = "管理（Administration）", Max = 16000 },
                        new() { Name = "信息技术（Information Techology）", Max = 30000 },
                        new() { Name = "客服（Customer Support）", Max = 38000 },
                        new() { Name = "研发（Development）", Max = 52000 },
                        new() { Name = "市场（Marketing）", Max = 25000 },
                    }
                }
            ],
            Series = new()
            {
                new R.Radar()
                {
                    Name = "预算 vs 开销（Budget vs spending）",
                    Data = new[]
                    {
                        new SeriesData()
                        {
                            Name = "预算分配（Allocated Budget）",
                            Value = new[] { 4300, 10000, 28000, 35000, 50000, 19000 }
                        },
                        new SeriesData()
                        {
                            Name = "实际开销（Actual Spending）",
                            Value = new[] { 5000, 14000, 28000, 31000, 42000, 21000 }
                        }
                    }
                }
            }
        };

        OptionGuage = new()
        {
            Title = new() { Text = "仪表图" },
            Tooltip = new()
            {
                Formatter = "{a} <br/>{b} : {c}%"
            },
            Toolbox = new()
            {
                Feature = new()
                {
                    Restore = new(),
                    SaveAsImage = new()
                }
            },
            Series = new()
            {
                new G.Gauge()
                {
                    Name = "",
                    Detail = new()
                    {
                        Formatter = "{value}%"
                    },
                    Data = new[] { new { Value = 75, Name = "完成率" } }
                }
            }
        };
    }
}
